<template>
  <div class="flex flex-wrap">
    <div class="w-[25%]">
      <LeftCard />
    </div>
    <div class="w-[75%]">
      <FosoCard :showheader="false" class="!pl-0">
        <FosoForm
          ref="formRef"
          :form-columns="formColumns"
          :form-data="formData"
          :form-expand="true"
          label-width="100px"
        />
      </FosoCard>
      <FosoCard :showheader="false" class="cleartable !pl-0 !pt-0">
        <Grid>
          <template #toolbar-buttons>
            <el-button class="ml-auto" type="primary" @click="drawerApi.open()">
              新增用户
            </el-button>
          </template>
        </Grid>
      </FosoCard>
    </div>
    <!-- 弹窗框 -->
    <Drawer class="w-[40%]" title="新增用户" />
  </div>
</template>

<script setup lang="tsx">
import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';

import { useVbenDrawer } from '@vben/common-ui';

import { ElTag } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

import ExtraDrawer from './components/drawer.vue';
import LeftCard from './components/LeftCard.vue';
import { type RowType, StatusType } from './type';

import 'element-plus/es/components/tag/style/css';
// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});
// 表格数据
const data = ref([
  {
    id: 1,
    name: 'John',
    parentId: null,
    age: 5,
    nickname: 'Johnny',
    role: 'Admin',
    address: '123 Main St',
    status: '1',
  },
  {
    id: 2,
    name: 'Jane',
    parentId: 1,
    age: 6,
    nickname: 'Janey',
    role: 'User',
    address: '456 Elm St',
    status: '2',
  },
  {
    id: 3,
    name: 'Bob',
    parentId: null,
    age: 28,
    nickname: 'Bobby',
    role: 'User',
    address: '789 Oak St',
    status: '3',
  },
  {
    id: 4,
    name: 'Alice',
    parentId: 3,
    age: 22,
    nickname: 'Ally',
    role: 'User',
    address: '101 Pine St',
    status: '2',
  },
]);
// 表格配置项
const gridOptions: VxeGridProps<RowType> = {
  data: data.value,
  columns: [
    {
      title: '序号',
      type: 'seq',
      width: 50,
    },
    { field: 'name', title: 'Name', treeNode: true },
    {
      field: 'age',
      sortable: true,
      title: 'Age',
    },
    { field: 'nickname', title: 'Nickname' },
    { field: 'role', title: 'Role' },
    { field: 'address', showOverflow: true, title: 'Address' },
    {
      field: 'status',
      title: '标签',
      width: 300,
      slots: {
        default: ({ row }) => {
          return <ElTag type="info">{StatusType[row.status]}</ElTag>;
          // 根据不同的状态返回不同的标签
        },
      },
    },
  ],
  keepSource: true,
  exportConfig: {},
  toolbarConfig: {
    slots: {
      buttons: 'toolbar-buttons', // 指定自定义按钮插槽名称
    },
    custom: true,
    export: true,
    import: true,
    refresh: true,
    zoom: true,
  },
  treeConfig: {
    transform: true, // 自动将 parentId 转换为树形结构
    lazy: false, // 非懒加载
    indent: 20, // 缩进宽度
  },
  border: true,
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
};
// 表格事件
const gridEvents: VxeGridListeners<RowType> = {};
// 表格实例
const [Grid] = useVbenVxeGrid({ gridEvents, gridOptions });

// 表单实例
const formRef = ref();
// 表单配置项
const formColumns = computed(() => [
  {
    label: '用户名', // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
  },
  {
    label: '昵称', // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    show: false, // 控制是否显示
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
    span: 8, // 自行配置行宽
  },
  {
    label: '角色', // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    show: false, // 控制是否显示
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
    span: 8, // 自行配置行宽
  },
  {
    label: '手机号码', // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    show: false, // 控制是否显示
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
    span: 8, // 自行配置行宽
  },
  {
    label: '邮箱', // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    show: false, // 控制是否显示
    componentProps: {
      placeholder: '请输入',
      clearable: true,
    },
    span: 8, // 自行配置行宽
  },
]);
// 表单数据
const formData = ref({
  name: '',
  age: 18,
  gender: '',
  gender2: '',
  checkedCities: ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'],
  gender3: '',
  cascader: [],
  allselect: false,
  gender4: '',
  tree: [], // Tree 组件绑定的数据
});
</script>
<style scoped></style>
